<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* center 中间 left 左边 right 右  多行文本justify 两顿对齐*/
        .box1 {
            width: 500px;
            text-align: center;
            background-color: aqua;
        }

        .box2 {
            width: 500px;
            text-align: justify;
            background-color: green;
        }

        .box3 {
            height: 100px;
            width: 500px;
            background-color: yellow;
            line-height: 100px;
            text-align: center;
        }

        .box4 {
            width: 500px;
            height: 100px;
            background-color: gray;
            line-height: 30px;
            /* 行高 */
            

        }
    </style>

</head>

<body>

    <div class="box1">hhhhhhhhhhhhhhh</div>

    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, porro sint dolores in repellendus
        animi quis. Ea mollitia ex animi soluta earum odit voluptas voluptatem dolores aut nobis! Repellat, provident.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, excepturi? Dolore natus adipisci doloribus aliquid
        placeat porro, quia fuga nostrum minus aliquam, blanditiis doloremque laboriosam consectetur, quisquam eius
        officia. Rerum?</div>



    <div class="box3">
        hhhhhhhhh
    </div>

    <div class="box4">

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, natus temporibus adipisci fugiat quos ducimus
        porro culpa sed libero architecto molestias nesciunt possimus dolores quaerat eum sunt, delectus numquam et.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam vitae est esse voluptatum quasi distinctio
        voluptatem, voluptatibus amet iste facere nihil deleniti labore accusamus! Iure, fugit praesentium! Magnam, a
        expedita.lor Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi inventore cum repellendus. Aut unde,
        sint quaerat tempora sed molestiae est culpa non cupiditate vitae modi veritatis magnam quasi nihil voluptas.

    </div>

</body>

</html>